<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>KindPage Demo</title>
		<link rel="stylesheet" href="../themes/default/default.css" />
		<link rel="stylesheet" href="kindpage.css" />
		<script charset="utf-8" src="../kindeditor-all.js"></script>
		<script charset="utf-8" src="kindpage.js"></script>
		<style>
			body {
				margin: 100px 5px;
			}
			.btn-area {
				margin: 10px 0;
			}
		</style>
		<script>
			KindEditor.ready(function(K) {
				var editor = KindPage.create('.kindeditor', {
					allowFileManager : true
				});
				K('#J_getHtml').click(function(e) {
					console.log(editor.getAllContents());
				});
			});
		</script>
	</head>
	<body>
		<div class="btn-area">
			<button type="button" id="J_getHtml">取得内容</button>
		</div>
		<div>
			<strong>不可编辑</strong>
		</div>
		<div class="kindeditor" id="editor1">
			<strong>粗体</strong>
		</div>
		<div class="kindeditor" id="editor2">
			<div class="article">
				<h1>Heading 1</h1>
				<h2>Heading 2</h2>
				<h3>Heading 3</h3>
				<h4>Heading 4</h4>
				<p class="meta">Vancouver, BC — Wednesday, 23 April 2008</p>
				<a href="#" class="image">
					<img src="http://www.kindsoft.net/images/logo.png" alt="photo" />
				</a>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <a href="#">Visit site.</a></p>
				<h5>Heading 5</h5>
				<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
				<h6>Heading 6</h6>
				<p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.</p>
			</div>
		</div>
		<div class="kindeditor" id="editor3">
			<p>You might want to try to edit the table:</p>
			<table>
				<tr>
					<td>Lorem ipsum</td>
					<td>Dolor sit</td>
					<td class="currency">$125.00</td>
				</tr>
				<tr>
					<td>Dolor sit</td>
					<td>Nostrud exerci</td>
					<td class="currency">$75.00</td>
				</tr>
				<tr>
					<td>Nostrud exerci</td>
					<td>Lorem ipsum</td>
					<td class="currency">$200.00</td>
				</tr>
				<tr>
					<td>Lorem ipsum</td>
					<td>Dolor sit</td>
					<td class="currency">$64.00</td>
				</tr>
				<tr>
					<td>Dolor sit</td>
					<td>Nostrud exerci</td>
					<td class="currency">$36.00</td>
				</tr>
			</table>
		</div>
		<div class="kindeditor" id="editor4">
			<h2>Editing and formatting text without Markup</h2>
			<div class="block">
				<p>Editing any content Aloha Editor gives you the same experience modern office suites offer you. No need to learn any HTML, Wiki or other markup. The option dialogs have been designed for users not for techies. Writing content has never been that easy. You can see the formatting result in the buttons of the floating menu so you know in advance what will happen if you use a formatting. It has never been easier to edit tables. You can jump through the cells with the tab button. Hit tab in the last cell adds another row.</p>
			</div>
		</div>
		<div class="kindeditor" id="editor5">
			1234
		</div>
		<div class="kindeditor" id="editor6">
			1234
		</div>
		<div class="kindeditor" id="editor7">
			1234
		</div>
	</body>
</html>
